<!--
 * @Author: chunlai
 * @Date: 2025-07-30 13:43:46
 * @LastEditTime: 2025-08-19 10:32:04
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \0.newInsure\src\views\form\components\SmsCodeBtn.vue
 * @Description: 验证码
-->
<template>
  <div
    class="sms_btn"
    :class="disableSms ? 'disable' : smsPhoneChecked ? 'active' : ''"
    @click="sendSmsCode"
  >
    {{ btnText }}
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "SmsCodeBtn",
  props: {
    phoneNum: {
      type: String,
      default: () => "",
    },
  },
  components: {},
  data() {
    return {
      smsText: "", // 按钮文字
      disableSms: false, // 按钮禁用
      smsPhoneChecked: false,
    };
  },
  computed: {
    ...mapGetters({
      smsChecks: "common/smsChecks",
    }),
    btnText() {
      let res = "获取验证码";
      if (this.smsText) {
        res = this.smsText;
      }
      if (this.smsPhoneChecked) {
        res = "已验证";
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.smsText = "";
  },
  methods: {
    initModal(userInfo, userFlag) {
      const checkStr = `${userInfo.phone}${userInfo.validCode}${userFlag}`;
      const fdobj = this.smsChecks.find((e) => e == checkStr);
      this.smsPhoneChecked = fdobj ? true : false;
      this.$forceUpdate();
    },
    sendSmsCode() {
      if (!this.phoneNum) return this.$toast("请输入手机号");
      if (this.disableSms) return;
      this.$store.commit("updateLoad", true);
      let params = {
        mainRiskCode: this.mainRiskCode,
        workNum: this.workNum,
        phone: this.phoneNum,
      };
      this.$http
        .post("/ms-insure/api/common/aquireShortMsg", params, {
          json: true,
        })
        .then(({ data }) => {
          this.$store.commit("updateLoad", false);
          if (data.code == "1") {
            this.countDownSms();
            this.$toast("发送成功,请注意查收");
          } else {
            this.$toast(data.msg);
          }
        })
        .catch((err) => {
          this.$store.commit("updateLoad", false);
          // 获取失败
          if (err) {
            this.$toast(err);
          }
        });
    },
    countDownSms() {
      let iTime = 60;
      this.disableSms = true;
      this.smsText = iTime + "s后获取";
      let timer = setInterval(() => {
        iTime--;
        this.smsText = iTime + "s后获取";
        if (iTime === 0) {
          this.disableSms = false;
          this.smsText = "重新获取";
          clearInterval(timer);
        }
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
.sms_btn {
  width: 80px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  border-radius: 3px;
  background-color: #f56c6c;
  &.disable {
    background-color: #c8c9cc;
  }
  &.active {
    width: 60px;
    color: #67c23a;
    background-color: #f0f9eb;
  }
}
</style>
